<template>
  <div>
      <div class="wrapper">
          <div class="form_group">
              <div class="form_lable">
                  <i class="icon" :style="form_icon"></i>
              </div>
              <div class="form_input border-bottom-1px">
                  <cube-input
                      v-model="mobile.value"
                      :placeholder="mobile.placeholder"
                      :type="mobile.type"
                      :maxlength="mobile.maxlength"
                      :readonly="mobile.readonly"
                      :disabled="mobile.disabled"
                      :autofocus="mobile.autofocus"
                      :autocomplete="mobile.autocomplete"
                      :eye="mobile.eye"
                      :clearable="mobile.clearable"
                    ></cube-input>
              </div>
          </div>
          <div class="form_group">
              <div class="form_lable">
                  <i class="icon" :style="form_icon1"></i>
              </div>
              <div class="form_input border-bottom-1px">
                  <div class="form_input_box">
                      <cube-input
                          v-model="code.value"
                          :placeholder="code.placeholder"
                          :type="code.type"
                        ></cube-input>
                  </div>
                  <div>
                      <a href="javascript:;" class="form_btn" :class="{action : canClick}" @click.stop="getCode">{{content}}</a>
                  </div>
              </div>
          </div>
          <a v-if="comfirm_btn_action" href="javascript:;" class="comfirm_btn" :style="comfirm_btn_bg" @click.stop="fang_zerone">
              确定
          </a>
          <a v-else href="javascript:;" class="comfirm_btn" :style="comfirm_btn_bg">
              注册中...
          </a>
      </div>
      <div class="huodong_txt">
          <p>活动内容:</p>
          <!-- <p>1.新用户注册有机会随机领取最高88元的大红包,注册页面，根据提示注册就行了，注册很简单</p> -->
          <p>注册用户能在零壹坊领取更多联盟优惠券喔</p>
      </div>
      <cube-popup type="extend-popup" ref="popup">
        <div class="cube-extend-popup-content">
            <div class="red_envelopes_box" :style="red_envelopes_bg">
                <div class="hide_btn_img" :style="hide_btn_img" @click="receive_hide()">
                </div>
                <div class="red_el_price">
                    <p>{{amount}}<em>元</em></p>
                </div>
                <div class="receive_btn" :style="receive_btn_img" @click="btn_receive()">

                </div>
            </div>
        </div>
     </cube-popup>
  </div>
</template>
<script>
import {Debounce} from '@/util/date.js';
export default {
    data(){
        return{
            form_icon:{
                backgroundImage: "url(" + require("../../assets/page6_icon_01@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            form_icon1:{
                backgroundImage: "url(" + require("../../assets/page6_icon_02@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            comfirm_btn_bg:{
                backgroundImage: "url(" + require("../../assets/page6_btn_confirm@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            red_envelopes_bg:{
                backgroundImage: "url(" + require("../../assets/money_bg@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            hide_btn_img:{
                backgroundImage: "url(" + require("../../assets/close@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            receive_btn_img:{
                backgroundImage: "url(" + require("../../assets/btn_lq@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            mobile:{
                value: '',
                placeholder: '请输入手机号',
                type: 'number',
                readonly: false,
                maxlength: 11,
                disabled: false,
                autofocus: true,
                autocomplete: false,
                clearable:{
                    visible: true,
                    blurHidden: true
                }
            },
            code:{
                value:"",
                placeholder: '验证码',
                type: 'number',
            },
            content: '发送验证码',
              totalTime: 60,
              canClick: true,  //添加canClick
              amount:"",//新人红包金额
              redbag_log_id:"",//红包id
              comfirm_btn_action:true,//注册按钮显示状态
        }
    },
    methods:{
        show() {
        this.$refs.popup.show()
          },
          hide() {
            this.$refs.popup.hide()
        },
        receive_hide:function(){
            let that = this;
            that.$createDialog({
               type: 'confirm',
               icon: 'cubeic-alert',
               title: '温馨提示',
               content: '您还未领取红包,确认退出嘛?',
               confirmBtn: {
                 text: '确定',
                 active: true,
                 disabled: false,
                 href: 'javascript:;'
               },
               cancelBtn: {
                 text: '取消',
                 active: false,
                 disabled: false,
                 href: 'javascript:;'
               },
               onConfirm: () => {
                   that.hide();
                   //跳转用户进来的页面
                   that.tiaozhuan();
               },
               onCancel: () => {

               }
             }).show()

        },
        fang_zerone:Debounce(function(){
            let that = this;
            that.comfirm_btn_action = false;
            let host  = that.$store.state.host;
            let mobile = that.mobile.value;
            let code = that.code.value;
            let is_navigator = that.$store.state.is_navigator;
            let wechat_user= that.$cookies.get('_user_mark');
            if(mobile){
                let data = {};
                if(is_navigator == "wechat_user"){
                    data = {
                        mobile:mobile,
                        code:code,
                        wechat_user:that.$cookies.get('_user_mark')
                    }
                }else if(is_navigator == "ali_user"){
                    data = {
                        mobile:mobile,
                        code:code,
                        ali_user:that.$cookies.get('_user_mark')
                    }
                }else{
                    data = {
                        mobile:mobile,
                        code:code
                    }
                }
                that.$axios({
                    method: 'post',
                    url: "/fang/auth/fang_zerone",
                    data: that.$qs.stringify(data)
                    })
                    .then(function (response) {
                        that.comfirm_btn_action = true;
                        console.log(response,"aa")
                          let res = response.data;
                          if(res.status == 1){
                              if(that.$cookies.isKey("_user_mark")){
                                  that.$cookies.remove("_user_mark",'/','.01nnt.com');
                                  console.log(that.$cookies.get("_user_mark"),"sdfsdfds23202002232")
                              }
                              if(res.data.access_token){
                                  // 保存用户登录状态
                                  that.$cookies.set('_token01',res.data.access_token,"2h");
                                  that.$store.state._token01 = res.data.access_token;
                                  //绑定粉丝(要是链接上面带有的时候存有就绑定)
                                  let binPeople_id = that.$cookies.get("binPeople_id");
                                  if(binPeople_id){
                                      that.$axios.post("/fang/personal/bind_people",that.$qs.stringify({
                                                access_token:res.data.access_token,
                                                people_id:binPeople_id
                                          }))
                                          .then(function (response) {
                                              console.log(response,"binPeople_id")
                                          })
                                          .catch(function (error) {
                                            console.log(error);
                                      });
                                  }
                              }
                              if(res.data.user_status == 1){
                                  //请求新人红包接口
                                  that.get_hongbao(res.data.access_token);
                              }else{
                                  //跳转用户进来的页面
                                  that.tiaozhuan();
                              }

                          }else{
                              that.showAlert(res.msg);
                          }
                    })
                    .catch(function (error) {
                        that.comfirm_btn_action = true;
                      console.log(error);
                      that.showAlert(error);
                });
            }else{
                that.showToastTxtOnly("请输入正确的手机号码!")
            }
        },500),
        get_hongbao:function(access_token){
            let that = this;
            const toastlog = that.$createToast({
                    time:0,
                  txt: '加载中...',
                  mask: true
                })
            toastlog.show();
            //查找是否以领过红包
            that.$axios.post("/fang/tool/redbag/register", that.$qs.stringify({
                        access_token:access_token
                    })
                )
                .then(function (response) {
                    toastlog.hide()
                    console.log(response.data,"红包");
                    if(response.data.status == 1){
                        that.show();
                        that.amount = response.data.data.amount;
                        that.redbag_log_id = response.data.data.redbag_log_id;
                    }else{
                        //跳转用户进来的页面
                        that.tiaozhuan();
                    }
                })
                .catch(function (error) {
                    toastlog.hide()
                  console.log(error);
                  that.showAlert(error);
            });
        },
        btn_receive:Debounce(function(){
            let that = this;
            const toastlog = that.$createToast({
                    time:0,
                  txt: '领取中...',
                  mask: true
                })
            toastlog.show();
            let redbag_log_id = that.redbag_log_id;
            let _token01 = that.$store.state._token01;
            if(!redbag_log_id || !_token01){
                toastlog.hide();
                that.showToastTxtOnly("哎呀出错了!")
                return;
            }
            that.$axios.post("/fang/tool/redbag/receive", that.$qs.stringify({
                        access_token:_token01,
                        redbag_log_id:redbag_log_id
                    })
                )
                .then(function (response) {
                    toastlog.hide()
                    if(response.data.status == 1){
                        that.hide();
                        that.showToastTxtOnly(response.data.msg);
                        setTimeout(function(){
                            //跳转用户进来的页面
                            that.tiaozhuan();
                        },2000)
                    }else{
                        that.showToastTxtOnly(response.data.msg);
                        //跳转用户进来的页面
                        that.tiaozhuan();
                    }

                })
                .catch(function (error) {
                    toastlog.hide()
                  console.log(error);
                  that.showAlert(error);
            });
        },1000),
        tiaozhuan:function(){
            let that = this;
            //跳转用户进来的页面
            if(!that.$store.state.toUrl || that.$store.state.toUrl == "/binzerone" || that.$store.state.toUrl == "/selectadress"){
                that.$router.replace("/");
            }else{
                that.$router.replace(that.$store.state.toUrl);
            }
        },
        getCode:Debounce(function(){
            let that = this;
            let host  = that.$store.state.host;
            let mobile = that.mobile.value;
            if(!this.canClick){
                return;
            }
            const toast = this.$createToast({
                time: 5000,
                txt: '发送中'
              })
              toast.show()
            if(mobile){
                that.$axios.post("/fang/auth/verify_code", that.$qs.stringify({
                            mobile:mobile
                        })
                    )
                    .then(function (response) {
                        toast.hide()
                          let res = response.data;
                          if(res.status == 1){
                              that.countDown();
                          }else{
                              that.showAlert(res.msg);
                          }
                    })
                    .catch(function (error) {
                        toast.hide()
                      console.log(error);
                      that.showAlert(error);
                });
            }else{
                that.showToastTxtOnly("请输入正确的手机号码!")
            }
        },1000),
        showToastTxtOnly(text) {
         this.toast = this.$createToast({
           txt: text,
           type: 'txt'
         })
         this.toast.show()
         },
         showAlert(error) {
           this.$createDialog({
             type: 'alert',
             title: '出错了',
             content: error,
             icon: 'cubeic-alert'
           }).show()
       },
       countDown () {
          if (!this.canClick) return   //改动的是这两行代码
          this.canClick = false
          this.content = this.totalTime + 's后重新发送'
          let clock = window.setInterval(() => {
            this.totalTime--;
            this.$cookies.set("totalTime",this.totalTime,"60s");
            this.content = this.totalTime + 's后重新发送'
            if (this.totalTime < 0) {
              window.clearInterval(clock)
              this.$cookies.remove("totalTime");
              this.content = '重新发送验证码'
              this.totalTime = 60;
              this.canClick = true   //这里重新开启
            }
          },1000)
        }
    },
    metaInfo: {
      title: "绑定手机号码"
    },
    mounted(){
        if(this.$cookies.get("totalTime")){
            this.totalTime = this.$cookies.get("totalTime");
            this.canClick = true;
            this.countDown();
        }
    }
}
</script>
<style scoped>
.wrapper{
    margin-top: .6rem;
}
.wrapper .form_group{
    display: flex;
    align-items: center;
    height: 1.76rem;
    padding-right: 1.16rem;
}
.wrapper .form_group .form_lable{
    width: 2.4rem;
    flex: none;
    text-align: right;
}
.wrapper .form_group .form_lable .icon{
    display: block;
    width: 1.24rem;
    height: 1.2rem;
    margin-left: 1rem;
}
.wrapper .form_group .form_input{
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
}
.wrapper .form_group .form_input > input{
    height: 100%;
    flex: 1;
    border: none;
}
.wrapper .form_group .border-bottom-1px::after{
    border-color: #E1E1E1;
}
.cube-input::after{
    border: none;
}
.wrapper .form_group .form_btn{
    width: 2.74rem;
    background: #EBEBEB;
    border-radius: .16rem;
    padding: .16rem .2rem .16rem .24rem;
}
.wrapper .form_group .action{
    background: #1AB9A3;
    color: #FFFFFF;
}
.wrapper .form_group .form_input_box{
    flex: 1;
}
.comfirm_btn{
    display: block;
    font-size: .64rem;
    color: #FFFFFF;
    font-weight: 600;
    width: 13.4rem;
    height: 2.64rem;
    line-height: 2rem;
    padding: 0;
    background: none;
    border: none;
    margin: 7.5rem auto 0 auto;
    letter-spacing: 2px;
}
.cube-input{
    flex:1;
}
.huodong_txt{
    margin-top: 1.5rem;
    font-size: .56rem;
    color: #545454;
    text-align: left;
    padding: 0 1rem;
    line-height: 1.5;
}
.huodong_txt p{
    padding-left: 1rem;
}
.huodong_txt p:nth-child(0n+1){
    padding-left: 0;
}
.red_envelopes_box{
    width: 14.36rem;
    height: 13.4rem;
    position: relative;
}
.red_envelopes_box .hide_btn_img{
    width: 1.44rem;
    height: 1.44rem;
    position: absolute;
    top: -1.9rem;
    right: 1.6rem;
}
.red_envelopes_box .red_el_price{
    padding-top: 6.5rem;
    font-size: 1.96rem;
    color: #ffffff;
}
.red_envelopes_box .red_el_price em{
    font-size: .98rem;
    color: #ffffff;
}
.red_envelopes_box .receive_btn{
    margin: 1.8rem auto 0 auto;
    width: 6.64rem;
    height: 1.6rem;
}
</style>
